<template>
	<view class="contain">
		<view class="title_image">
			<view class="title_image_c">
				<image src="../../../static/image/leju-logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="input_c">
				<input class="userInput" type="number" v-model="newUserInfo.mobileNum" placeholder="手机号码" />
			</view>
			<view class="password_c input_c">
				<input class="userInput" :type="seen ? 'text' : 'password'" :value="newUserInfo.password" @input="pwdInput"
				 placeholder="请输入新密码" />
				<view class="show_img" @tap="changeShowPassword">
					<image v-if="seen" src="../../../static/image/xianshi.png" mode="scaleToFill"></image>
					<image v-else src="../../../static/image/yincang.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="input_c">
				<input class="userInput" type="text" v-model="newUserInfo.userName" placeholder="用户名" />
			</view>
			<view class="input_c">
				<input class="userInput" type="text" v-model="newUserInfo.userNickname" placeholder="昵称" />
			</view>
			<view class="input_c auth_code">
				<input class="userInput" type="number" v-model="newUserInfo.authCode" placeholder="验证码" />
				<view class="get_auth_code" @tap="noFn">
					获取验证码
				</view>
			</view>

			<view class="sub" @tap="sub">
				注册
			</view>

			<view class="agreement_c">
				<view class="radio_c" @tap="changAgree">
					<view class="radio">
						<image v-if="newUserInfo.isAgree" src="../../../static/image/yuan.png" mode="widthFix"></image>
					</view>
					<text>同意《协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WxValidate from "../../../utils/WxValidate.js";
	import request from "../../../api/request.js";

	export default {
		data() {
			return {
				seen: false,
				newUserInfo: {
					mobileNum: 18638234331,
					password: 123456,
					userName: 'zz',
					authCode: undefined,
					userNickname: 'zzz',
					isAgree: 'agree'
				}
			};
		},
		methods: {
			changeShowPassword() {
				this.seen = !this.seen;
			},
			changAgree() {
				if(!this.newUserInfo.isAgree) {
					this.newUserInfo.isAgree = 'agree'
				} else {
					this.newUserInfo.isAgree = undefined
				}
			},
			async sub() {
				console.log(this.newUserInfo);
				const error = (() => {

					let params = this.newUserInfo;
					if (!this.WxValidate.checkForm(params)) {
						//表单元素验证不通过，此处给出相应提示
						let error = this.WxValidate.errorList[0];
						console.log(params);
						switch (error.param) {
							case "mobileNum":
							case "password":
							case "authCode":
							case "userName":
							case "isAgree":
								uni.showToast({
									title: error.msg,
									icon: "none"
								})
								break;
						}
						return true;
					} else {
						return false
					}
				})()
				// 当没有错误时
				if (!error) {
					const res = await request({
						url: "/member/register",
						method: "POST",
						data: {

							"birthday": "",
							"city": "",
							"createTime": "",
							"email": "",
							"growth": 0,
							"historyIntegration": 0,
							"icon": "/static/icons/leju-logo.png",
							"integration": 0,
							"isDisabled": 0,
							"memberLevelId": "",
							"nickname": this.newUserInfo.userNickname,
							"password": this.newUserInfo.password,
							"personalizedSignature": "",
							"phone": this.newUserInfo.mobileNum,
							"realname": "",
							"sex": 0,
							"sourceType": 0,
							"status": 1,
							"username": this.newUserInfo.userName,
							"wxOpenId": ""

						}
					});
					if(res.data.success == true) {
						uni.showToast({
							title: '注册成功,1秒后跳转至登录页面'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '../login'
							})							
						},1500)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				}
			},
			pwdInput(e) {
				this.newUserInfo.password = e.detail.value;
			},

			// 初始化验证方法
			initValidate() {
				let rules = {
					mobileNum: {
						required: true,
						tel: true
					},
					password: {
						required: true,
					},
					userName: {
						required: true
					},
					userNickname: {
						required: true
					},
					isAgree: {
						required: true
					}
				}

				let message = {
					mobileNum: {
						required: '请输入手机号',
						tel: '请输入正确的手机号'
					},
					password: {
						required: "未输入新密码",
					},
					userName: {
						required: "未输入用户名",
					},
					userNickname: {
						required: "未输入昵称",
					},
					isAgree: {
						required: '请先勾选同意'
					}

				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);
			},
			// 功能未开发
			noFn() {
				uni.showToast({
					title: '功能未开发, 无需输入',
					icon: "none"
				})
			}
		},
		onLoad() {
			this.initValidate();
		}
	}
</script>

<style lang="scss" scoped>
	@import './register.scss';
</style>
